<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Show/Hide Elements on Link Click</title>
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
<a href="#" id="showHideLink">点击这里</a>
<div id="hiddenElement" class="hidden">这是要显示或隐藏的元素。</div>

<button id="resetButton">弹回</button>

<script>
    // 获取链接、隐藏元素和重置按钮
    var link = document.getElementById('showHideLink');
    var hiddenElement = document.getElementById('hiddenElement');
    var resetButton = document.getElementById('resetButton');

    // 为链接添加点击事件监听器
    link.addEventListener('click', function(event) {
        event.preventDefault(); // 阻止链接的默认行为（跳转到另一个页面）

        if (hiddenElement.classList.contains('hidden')) {
            hiddenElement.classList.remove('hidden'); // 显示隐藏的元素
            this.classList.add('hidden'); // 隐藏链接本身
        } else {
            hiddenElement.classList.add('hidden'); // 隐藏元素
        }
    });

    // 为重置按钮添加点击事件监听器
    resetButton.addEventListener('click', function() {
        // 显示链接并隐藏其他元素
        link.classList.remove('hidden');
        hiddenElement.classList.add('hidden');
    });
</script>
</body>
</html>
